<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<view class="search">
			<u-search v-model="queryParam.orderParams" @custom="search" @search="search" ></u-search>
			<!-- placeholder="产品编号 | 助记码 | 品牌 | 颜色 | 规格 | 型号" -->
		</view>
		<view class="filter">
			<view class="filter-item" @click="showType=true">
				全部分类
			</view>
			<!-- <view class="filter-item">
				数量排序
			</view> -->
			<view class="filter-item" @click="open">
				筛选
				<!-- <u-icon name="plus" :size="24"></u-icon> -->
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="loadData">
			<view v-for="(item,index) in list" :key="item.id">
				<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<view class="apply-text" v-for="(child,idx) in columns" :key="idx">
									<span>{{child.title}}：</span>{{item[child.dataIndex] || ''}}</view>
							</u-col>
						</u-row>
						<u-number-box :positive-integer="false" v-model="item.selectNumber" @change="inputChange(item,index)"></u-number-box>
					</view>
				</u-card>
			</view>
		</mescroll-uni>

		<u-row :gutter="32" class="bottom-box" justify="center">
			<u-col span="12">
				<view><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
			</u-col>
		</u-row>
		<uPopup v-model="show" mode="right"  @close="close" @open="open" overlay>
		       	<view class="form-main">
		       		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		       		<u-form
		       				labelPosition="left"
		       				:model="model1"
		       				:rules="rules"
		       				ref="uForm"
							labelWidth="150"
							labelAlign='right'
		       		>
		       			<u-form-item
		       					label="产品编号:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.productCode"
		       						border="none" :clearable="false"
									placeholder="请输入产品编号"
		       				></u-input>
		       			</u-form-item>
		       			<u-form-item
		       					label="助记码:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.mnemonicCode"
		       						border="none" :clearable="false"
									placeholder="请输入助记码"
		       				></u-input>
		       			</u-form-item>
		       			<u-form-item
		       					label="品牌:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.brand"
		       						border="none" :clearable="false"
									placeholder="请输入品牌"
									
		       				></u-input>
		       			</u-form-item>
		       			<u-form-item
		       					label="颜色:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.productColor"
		       						border="none" :clearable="false"
									placeholder="请输入颜色"
									
		       				></u-input>
		       			</u-form-item>
		       			<u-form-item
		       					label="规格:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.spec"
		       						border="none" :clearable="false"
									placeholder="请输入规格"
									
		       				></u-input>
		       			</u-form-item>
		       			<u-form-item
		       					label="型号:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.productModel"
		       						border="none" :clearable="false"
									placeholder="请输入型号"
									
		       				></u-input>
		       			</u-form-item>
		       			<u-form-item
		       					label="仓位:"
		       					borderBottom
		       					ref="item1"
		       			>
		       				<u-input
		       						v-model="queryParam.spaceName"
		       						border="none" :clearable="false"
									placeholder="请选择产品仓位"
									type="select"
									:select-open="showSpace"
									@click="showSpace = true"
		       				></u-input>
		       			</u-form-item>
		       		</u-form>
					<view class="filter btn-bottom">
						<u-button @click="reset">重置</u-button>
						<u-button type="primary" @click="confirm">确定</u-button>
					</view>
		       	</view>
				
				<u-picker title="请选择产品仓位" mode="selector" v-model="showSpace" :range="spaceList" rangeKey="title"
					@confirm="selectSpace"></u-picker>
		</uPopup>
		
		<u-picker title="商品分类" mode="selector" v-model="showType" :range="category" rangeKey="title" @confirm="selectType"></u-picker>
	</view>

</template>

<script>
	import MescrollMixins from '@/components/mescroll-uni/mescroll-mixins';
	import ListMxin from './mixins/ListMxin';
	import uNumberBox from '@/uview-ui/components/u-number-box/u-number-box';
	import uPopup from '@/uview-ui/components/u-popup/u-popup';
	import uPicker from '@/uview-ui/components/u-picker/u-picker';
	export default {
		mixins: [MescrollMixins, ListMxin],
		components: {
			uNumberBox,
			uPopup,
			uPicker
		},
		data() {
			return {
				queryParam: {
					productCode:''
				},
				current: 0,
				show: false,
				url: {
					list: 'bizProductAllList'
				},
				showType:false,
				showSpace:false,
				editInfo:{},
				selectList: [],
				category:[],
				spaceList:[],
				columns: [{
						title: '产品大类',
						dataIndex: 'categoryName',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					// {
					// 	title: '产品编号',
					// 	dataIndex: 'productCode',
					// 	ellipsis: true,
					// 	align: 'left',
					// 	width: '12.8%'
					// },
					{
						title: '库存',
						dataIndex: 'number',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '默认仓库',
						dataIndex: 'warehouseName',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '品牌',
						dataIndex: 'brand',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '颜色',
						dataIndex: 'color',
						ellipsis: true,
						align: 'left',
						width: '12.8%'
					},
					{
						title: '规格',
						dataIndex: 'spec',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '型号',
						dataIndex: 'model',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '仓库',
						dataIndex: 'warehouseName',
						align: 'right',
						width: '12.8%'
					},
					{
						title: '仓位',
						dataIndex: 'spaceName',
						align: 'right',
						width: '12.8%'
					},
				],
			}
		},

		computed: {
			top() {
				return this.CustomBar + 101
			},
		},
		onLoad(options) {
			this.editInfo = options
			this.getCategory()
			this.getSpaceList()
		},
		methods: {
			
			/**
			 * @获取仓位
			 */
			getSpaceList() {
				this.$u.api.getSpaceList({}).then(res => {
					if (res.code === 200) {
						let arr = res.data.list || []
						this.spaceList = arr.map(v => {
							let obj = {
								title: v.postion,
								value: v.id
							}
							return obj
						})
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			
			inputChange(item, index) {
				console.log(item);
				let idx = this.selectList.findIndex(v => v.id === item.id)
				if (idx>-1) {
					if (item.selectNumber) {
						this.selectList.splice(idx, 1, item)
					} else {
						this.selectList.splice(idx, 1)
					}
				} else {
					if (item.selectNumber) {
						this.selectList.push(item)
					}
				}
				console.log(this.selectList);
			},
			submit() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				// 组装数据
				const selectList = this.selectList.map(v=>{
					let obj={
						productId:v.id,
						warehouseName:v.warehouseName,
						spaceName:v.spaceName,
						warehouseId:v.warehouseId,
						spaceId:v.spaceId,
						model:v.model,
						number:v.selectNumber,
						gainStatus:2,
						color:v.color,
						brand:v.brand,
						spec:v.spec,
						stock:v.number

					}
					return obj
				})
				// 对选择数组和原始数据求并集并处理
				let defaultIds = new Set(prevPage.$vm.list.map(v=>v.productId))
				let selectIds = new Set(selectList.map(v=>v.productId))
				let unionIds = [...defaultIds].filter(id=>selectIds.has(id))
				if(unionIds.length && +this.editInfo.currentIndex === 0){
					unionIds.forEach(val=>{
						let index = prevPage.$vm.list.findIndex(v=>v.productId === val)
						if(index > -1){
							let item = prevPage.$vm.list[index]
							item.gainStatus = 3
							prevPage.$vm.list.splice(index,1,item)
						}
					})
				}
				prevPage.$vm.list.push(...selectList)
				uni.navigateBack()
			},
			
			navTo(url,item) {
				item.currentIndex = this.current
				let query = stringify(item)
				uni.navigateTo({
					url: `${url}?${query}` 
				});
			},
			confirm(){
				this.close()
				this.search()
			},
			reset(){
				this.queryParam ={}
				this.show = false
				this.list = []
				this.loadData({page:1,num:10})
			},
			getCategory(){
				
				this.$u.api.listTree({}).then(res=>{
					this.category = [{title:'全部',id:''}]
					this.category.push(...res.data)
					
				})
			},
			selectType(index){
				this.list = []
				this.queryParam.categoryId = this.category[index].id
				this.search()
			},
			selectSpace(index){
				this.list = []
				this.queryParam.spaceId = this.spaceList[index].value
				this.queryParam.spaceName = this.spaceList[index].title
				this.search()
			},
			
		}

	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 80px;
		height: 80px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}

	.filter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #ffffff;
	}
	.form-main{
		padding: 30rpx;
	}
	.btn-bottom{
		position: absolute;
		bottom: 80rpx;
		width: 90%;
	}
</style>